<template>
	<div class="contanis">
		<div class="contanis-header">
			 <div class="contanis-header-top">
				  <swiper :autoplay="true" :interval="3000" :duration="1000">
				  	<swiper-item v-for="(item) in banner">
				  		<view class="swiper-item">
							<image :src="host+item['pic']" mode="aspectFill"></image>
						</view>
				  	</swiper-item>
				  </swiper>
			 </div>
			 <div class="contanis-header-bottom"></div>
		</div>
		<div class="menu">
			<div class="menu-item">
				 <div class="menu-icon-bg"></div>
				 <div class="menu-text">每日签到</div>
			</div>
			<div class="menu-item">
				<div class="menu-icon-bg"></div>
				<div class="menu-text">我的积分</div>
			</div>
			<div class="menu-item">
				<div class="menu-icon-bg"></div>
				<div class="menu-text">我的收藏</div>
			</div>
			<div class="menu-item">
				<div class="menu-icon-bg"></div>
				<div class="menu-text">兑换记录</div>
			</div>
		</div>
		<div class="body">
			 <div class="box-item">
				  <div class="box-item-title">
					   活动专场
				  </div>
				  <div class="box-item-content">
					   <div class="box_one_list">
						    <div class="box_one_item">
								 <div class="box-one-item-left">
									  <div class="box-one-item-image">
										  
									  </div>
								 </div>
								 <div class="box-one-item-right">
									  <div class="box-one-item-title">ASmoreS山地自行车</div>
									  <div class="box-one-item-limit-num">限量500份</div>
									  <div class="box-one-item-has-change">已兑换3300份</div>
									  <div class="box-one-item-interger">
										   658 <span>积分</span>
									  </div>
									  <div class="btn-change">立即兑换</div>
								 </div>
							</div>
					   </div>
				  </div>
			 </div>
			 <div class="box-item">
				  <div class="box-item-title">
					   猜你喜欢
				  </div>
			 </div>
		</div>
	</div>
</template>

<script>
	import { integralBanner } from '../../../api/index.js';
	export default {
	  components:{
	  },
	  data(){
		 return {
			 banner:[],
			 host:this.$domain
		 }
	  },
	  onShow() {
		 this.getIntegralBanner();
	  },
	  created(){
	  },
	  mounted(){
	  },
	  methods:{
		getIntegralBanner(){
			integralBanner().then(res=>{
				if (res.code==200){
					this.banner = res.data;
				}
			})
		}
	  },
	};
</script>

<style>
	.contanis-header { height: 200px; background: #303030; position: relative; overflow: hidden;}
	.contanis-header-bottom { width: 100%; height: 100px; position: absolute; bottom: -30px; left: 0; background: url(../../assets/images/_top_1.png); background-size: 100% 100%;}
	.contanis-header-top { width: 90%; height: 140px; border-radius: 10px; overflow: hidden; position: absolute; top: 40px; left: 50%; z-index: 999; margin: 0 auto; margin-left: -45%;}
	.contanis-header-top image { width: 100%; height: 140px;}
	.menu { text-align: center;}
	.menu-item { width: 20%; height: 100px; display: inline-block; vertical-align: top; margin: 0 5px;}
	.menu-icon-bg { width: 60px; height: 60px; background: rgba(255, 234, 234, 0.8); border-radius: 30px; margin: 0 auto;}
	.menu-text { font-size: 13px; height: 30px; line-height: 30px; color: #666;}
	.body { width: 90%; margin: 0 auto;}
	.box-item { margin-bottom: 10px;}
	.box-item-content { padding-top: 10px;}
	.box_one_list { width: 100%; height: auto;}
	.box_one_item { width: 100%; height: 120px; }
	.box-one-item-left { width: 35%; height: 120px; display: inline-block; vertical-align: top;}
	.box-one-item-right { position: relative; display: inline-block; width: 55%; float: right; margin-left: 10px;}
	.box-one-item-title { height: 30px; line-height: 30px;}
	.box-one-item-image { width: 120px; height: 120px; margin: 0 auto; background-color: red;}
	.box-one-item-limit-num { display: inline-block; font-size: 12px; width: auto; height: 20px; line-height: 20px; padding: 0 5px; color: red; border: 1px solid red;}
	.box-one-item-has-change { font-size: 12px; color: #666; margin-top: 25px;}
	.box-one-item-interger { font-size: 20px; color: red;}
	.box-one-item-interger span { font-size: 13px;}
	.btn-change { width: auto; padding: 0 10px; height: 30px; right: 0; border-radius: 15px; font-size: 13px; background: rgba(255,235,232,.5); line-height: 30px; text-align: center; position: absolute; bottom: 0;}
</style>